import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import store from "../store";
import { Message } from "element-ui";
import getPageTitle from "@/utils/get-page-title";

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    component: () =>
      import(/* webpackChunkName: "Login" */ "@/views/backend/Login.vue"),
    meta: { title: "登陆" }
  },
  {
    path: "/",
    component: () =>
      import(/* webpackChunkName: "Layout" */ "@/views/frontend/Layout.vue"),
    redirect: "/home",
    children: [
      {
        path: "/home",
        component: () =>
          import(/* webpackChunkName: "Home" */ "@/views/frontend/Home.vue")
      },
      {
        path: "/category",
        component: () =>
          import(
            /* webpackChunkName: "Layout" */ "@/views/frontend/Category.vue"
          ),
        meta: { title: "分类" }
      },
      {
        path: "/link",
        component: () =>
          import(/* webpackChunkName: "Link" */ "@/views/frontend/Link.vue"),
        meta: { title: "工具" }
      },
      {
        path: "/about",
        component: () =>
          import(/* webpackChunkName: "About" */ "@/views/frontend/About.vue"),
        meta: { title: "关于" }
      },
      {
        path: "/blog/:blogId",
        component: () =>
          import(/* webpackChunkName: "Blog" */ "@/views/frontend/Blog.vue"),
        meta: { title: "博客详情" }
      }
    ]
  },
  // 后台管理
  {
    path: "/adminDJ",
    component: () =>
      import(
        /* webpackChunkName: "Layout-Admin" */ "@/views/backend/Layout.vue"
      ),
    redirect: "/adminDJ/blog",
    meta: {
      requireAuth: true
    },
    children: [
      {
        path: "/adminDJ/index",
        component: () =>
          import(/* webpackChunkName: "Index-Admin" */ "@/views/backend/Index"),
        meta: { title: "管理首页" }
      },
      {
        path: "/adminDJ/blog",
        component: () =>
          import(/* webpackChunkName: "Blog-Admin" */ "@/views/backend/Blog"),
        meta: { title: "博客管理" }
      },
      {
        path: "/adminDJ/category",
        component: () =>
          import(
            /* webpackChunkName: "Category-Admin" */ "@/views/backend/Category"
          ),
        meta: { title: "分类管理" }
      },
      {
        path: "/adminDJ/tag",
        component: () =>
          import(/* webpackChunkName: "Tag-Admin" */ "@/views/backend/Tag"),
        meta: { title: "标签管理" }
      }
    ]
  },
  {
    path: "/adminDJ/blog/create",
    component: () =>
      import(
        /* webpackChunkName: "BlogCreate-Admin" */ "@/views/backend/BlogCreate"
      ),
    meta: {
      requireAuth: true,
      title: "创建博客"
    }
  },
  {
    path: "/adminDJ/blog/edit/:blogId",
    component: () =>
      import(
        /* webpackChunkName: "BlogEdit-Admin" */ "@/views/backend/BlogEdit"
      ),
    meta: {
      requireAuth: true,
      title: "编辑博客"
    }
  },
  {
    path: "*",
    component: () => import(/* webpackChunkName: "404" */ "@/views/404")
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  document.title = getPageTitle(to.meta.title);
  NProgress.start();
  // token有值，默认登陆了
  const isLogin = store.state.token ? true : false;
  if (to.path == "/login") {
    next();
    return;
  }
  // 验证页面是否需要权限
  if (to.matched.some(res => res.meta.requireAuth)) {
    if (isLogin === true) {
      // console.log('需要登陆，已登陆，可以跳转');
      next();
    } else {
      Message.error({
        message: "未登陆"
      });
      // console.log('需要登陆，未登陆，拦截');
      next({ path: "/login" });
      // 从登陆页跳回登陆页 不触发afterEach() 解决进度条问题
      NProgress.done();
    }
  } else {
    // console.log('不需要登陆，放行');
    next();
  }
});

router.afterEach(() => {
  NProgress.done();
});

export default router;
